<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态表单</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/index.full.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #app {
            width: 100%;
            height: 100vh;
            padding: 5vh;
        }

        #app>* {
            margin: 25px 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 style="text-align: center;">动态表单</h1>
        <el-card style="width: 100%;">
            <h2>表单类型：{{ form_type }}</h2>
        </el-card>
        <el-card style="width: 100%;">
            <el-button @click="addFormItem" type="primary">增添表单内容</el-button>
            <div class="items">
                <div class="item" v-for="(item, index) in itemList" :key="index">
                    <div v-if="item.type === 'input'">
                        <div>{{ item.label }}</div>
                        <div>
                            <el-input v-model="item.value" style="width: 500px" placeholder="请输入内容" />
                        </div>
                    </div>
                </div>
            </div>
            <div style="display: flex;align-items: center;margin: 25px 0px;">
                <el-button @click="update_form_type_name_show = true">修改表单类型名称</el-button>
                <el-button type="primary" @click="() => {
                    submitFormType()
                }">提交</el-button>
            </div>
        </el-card>
        <el-dialog v-model="add_form_item_show" title="添加表单内容" width="1000">
            <div>
                <div>选择添加类型</div>
                <div>
                    <el-select v-model="add_form.type" placeholder="选择增加的表单类型" size="large" style="width: 240px">
                        <el-option v-for="(item,index) in form_type_list" :key="index" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div>填写字段名称</div>
                <div>
                    <el-input v-model="add_form.label" style="width: 500px" placeholder="请输入字段名称" />
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="add_form_item_show = false">取消</el-button>
                    <el-button type="primary" @click="() => {
                        formItemsPush()
                        clearAddForm()
                        add_form_item_show = false
                    }">添加</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="update_form_type_name_show" title="修改表单类型名称" width="1000">
            <div>
                <el-input v-model="temp_form_type" style="width: 500px" placeholder="当前表单名称" />
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="update_form_type_name_show = false">取消</el-button>
                    <el-button type="primary" @click="() => {
                        form_type = temp_form_type
                        update_form_type_name_show = false
                    }">添加</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</body>
<script>
    const seriverPath = window.location.host;
    console.log(seriverPath);
    axios.get(`http://${seriverPath}/index/`).then(res => {
        console.log(res)
    })
    const app = Vue.createApp({
        data() {
            return {
                add_form_item_show: false,
                form_type: "",
                temp_form_type: "",
                update_form_type_name_show: false,
                itemList: [],
                add_form: {
                    type: "",
                    label: "",
                    value: ""
                },
                //表单类型
                form_type_list: [
                    {
                        value: "input",
                        label: "输入框"
                    }
                ]
            }
        },
        methods: {
            // 添加表单内容
            addFormItem() {
                console.log("添加表单内容")
                this.add_form_item_show = true
            },
            // 清空添加表单内容
            clearAddForm() {
                this.add_form = {
                    type: "",
                    label: "",
                    value: ""
                }
            },
            // 添加表单内容到表单列表
            formItemsPush() {
                this.itemList.push({
                    type: this.add_form.type,
                    label: this.add_form.label,
                    value: this.add_form.value
                })
            },
            // 修改表单类型名称
            updateFormTypeName() {
                this.update_form_type_name_show = true
            },
            // 提交类型表单
            submitFormType(){
                console.log(JSON.stringify(this.itemList))
            }
        },
        mounted() {
            console.log("页面加载完毕", this)
        }
    })
    app.use(ElementPlus);
    app.mount('#app')
</script>

</html>